<template>
  <div>
    <div class="box">
      <div>
        手机号:<input
          type="text"
          :style="{ borderColor: this.$store.state.color }"
          placeholder="请输入手机号"
          @blur="shou"
          v-model="mobile"
        /><span class="iconfont icon-cuo" v-show="show" @click="kong"></span
        ><span class="q1 iconfont icon-duihaoyuan" v-show="show1"></span>
      </div>
      <div>
        密码:<input
          type="password"
          :style="{ borderColor: this.$store.state.color }"
          placeholder="请输入密码"
          @blur="pass"
          v-model="coll"
        /><span class="iconfont icon-cuo" v-show="isshow" @click="qing"></span
        ><span class="q1 iconfont icon-duihaoyuan" v-show="isshow1"></span>
      </div>
      <div>
        <button
          :disabled="disabled"
          @click="loading"
          :style="{ background: this.$store.state.color }"
        >
          登录
        </button>
      </div>
    </div>
  </div>
</template>
<script>
const regMobile = /^1[3|5|6|7|8|9]\d{9}$/;
const regCode = /^(?![^A-Za-z]+$)(?![^0-9]+$)[\x21-x7e]{6}$/;
export default {
  components: {},
  data() {
    return {
      mobile: "",
      coll: "",
      show: false,
      show1: false,
      isshow: false,
      isshow1: false,
      disabled: true,
    };
  },
  mounted() {},
  methods: {
    // 调用消息提示框
    showLoading(msg) {
      this.$loading.show(msg);
      setTimeout(() => {
        this.$loading.hide();
      }, 2000);
    },
    // 手机号正则判断
    shou() {
      if (!regMobile.test(this.mobile)) {
        this.showLoading("请输入正确的手机号！！！");
        this.show = true;
        this.show1 = false;
      } else {
        this.show1 = true;
        this.showLoading("手机号正确!!!");
      }
    },
    // 清空手机号
    kong() {
      this.mobile = "";
      this.show = false;
    },
    // 密码正则的判断
    pass() {
      if (!regCode.test(this.coll)) {
        this.showLoading("密码必须字母开头包含6位！！！");
        this.isshow = true;
        this.isshow1 = false;
      } else {
        this.isshow1 = true;
        this.showLoading("密码正确!!!");
      }
    },
    // 清空密码
    qing() {
      this.coll = "";
      this.isshow = false;
    },
    // 登录
    loading() {
      this.$router.push({ path: "/about" });
    },
  },
  computed: {},
  watch: {
    mobile() {
      if (this.mobile && this.coll) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    coll() {
      if (this.mobile && this.coll) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
  },
};
</script>
<style scoped>
.box {
  width: 90%;
  height: 160px;
  margin: 0 auto;
  margin-top: 50px;
  padding-top: 0.1px;
}
.box div {
  margin: 20px 30px;
}
button {
  width: 80px;
  height: 36px;
  border: none;
  color: #fff;
  border-radius: 6px;
}
input {
  margin-left: 5px;
  padding-left: 5px;
  height: 30px;
}
span {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  margin-top: -30px;
  text-align: center;
  line-height: 30px;
  font-size: 30px;
  color: #fff;
  position: absolute;
  left: 320px;
}
.q1 {
  background: chartreuse;
}
</style>